<template>
  <div>
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="基本参数">
          <a-form :form="form" layout="vertical" style="padding:20px;">
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-item label="计算轮次">
                  <a-select
                    v-decorator="[
                      'round',
                      { rules: [{ required: true, message: '请选择计算轮次' }] },
                    ]"
                    placeholder="请选择计算轮次"
                  >
                    <a-select-option
                      v-for="item in roundOptions"
                      :key="item.value"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="学年学期">
                  <a-select
                    v-decorator="[
                      'semester',
                      { rules: [{ required: true, message: '请选择学年学期' }] },
                    ]"
                    placeholder="请选择学年学期"
                  >
                    <a-select-option
                      v-for="item in semesterOptions"
                      :key="item.value"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="计算范围">
                  <a-select
                    v-decorator="[
                      'scope',
                      { rules: [{ required: true, message: '请选择计算范围' }] },
                    ]"
                    placeholder="请选择计算范围"
                    mode="multiple"
                  >
                    <a-select-option
                      v-for="item in scopeOptions"
                      :key="item.value"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="2" tab="计算系数" force-render>
          <a-table
            :columns="coefficientColumns"
            :data-source="coefficientData"
            :pagination="false"
            bordered
          >
            <template slot="value" slot-scope="text, record">
              <a-input-number
                v-if="record.editable"
                v-model="record.value"
                :min="0"
                :step="0.1"
                style="width: 100%"
              />
              <span v-else>{{ text }}</span>
            </template>
            <template slot="operation" slot-scope="text, record">
              <div class="editable-row-operations">
                <span v-if="record.editable">
                  <a @click="saveCoefficient(record.key)">保存</a>
                  <a-divider type="vertical" />
                  <a @click="cancelCoefficient(record.key)">取消</a>
                </span>
                <span v-else>
                  <a @click="editCoefficient(record.key)">编辑</a>
                </span>
              </div>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="3" tab="计算公式">
          <a-form :form="form" layout="vertical">
            <a-form-item label="工作量计算公式">
              <a-textarea
                v-decorator="[
                  'formula',
                  {
                    initialValue: defaultFormula,
                    rules: [{ required: true, message: '请输入计算公式' }],
                  },
                ]"
                :rows="6"
                placeholder="请输入计算公式"
              />
            </a-form-item>
            <a-form-item label="公式说明">
              <p>
                公式变量说明：<br />
                H: 标准课时数<br />
                K1: 职称系数<br />
                K2: 特殊身份系数<br />
                K3: 人数区段系数<br />
                K4: 学生层次系数<br />
                K5: 课程类别系数<br />
                K6: 环节类别系数<br />
                K7: 重复教学系数<br />
                K8: 教学手段系数<br />
                K9: 教学质量系数<br />
              </p>
            </a-form-item>
          </a-form>
        </a-tab-pane>
      </a-tabs>
      <div class="actions">
        <a-button type="primary" @click="handleSubmit">保存设置</a-button>
        <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
      </div>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'parameterSetting' })
  },
  data() {
    return {
      roundOptions: [
        { value: 'round1', label: '第一轮计算' },
        { value: 'round2', label: '第二轮计算' },
        { value: 'round3', label: '第三轮计算' },
      ],
      semesterOptions: [
        { value: '2022-2024-1', label: '2022-2023学年第一学期' },
        { value: '2022-2024-2', label: '2022-2023学年第二学期' },
        { value: '2024-2024-1', label: '2024-2024学年第一学期' },
      ],
      scopeOptions: [
        { value: 'computer', label: '信息工程系' },
        { value: 'math', label: '机电工程系' },
        { value: 'physics', label: '建筑工程系' },
        { value: 'chemistry', label: '化学学院' },
      ],
      coefficientColumns: [
        {
          title: '系数名称',
          dataIndex: 'name',
          key: 'name',
          width: '25%',
        },
        {
          title: '系数值',
          dataIndex: 'value',
          key: 'value',
          width: '25%',
          scopedSlots: { customRender: 'value' },
        },
        {
          title: '说明',
          dataIndex: 'description',
          key: 'description',
          width: '35%',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          width: '15%',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      coefficientData: [
        {
          key: '1',
          name: '职称系数(K1)',
          value: 1.2,
          description: '教授1.2，副教授1.1，讲师1.0，助教0.9',
          editable: false,
        },
        {
          key: '2',
          name: '特殊身份系数(K2)',
          value: 1.1,
          description: '学科带头人1.1，教学名师1.05，普通王芳.0',
          editable: false,
        },
        {
          key: '3',
          name: '人数区段系数(K3)',
          value: 1.0,
          description: '30人以下1.0，30-60人1.1，60人以上1.2',
          editable: false,
        },
        {
          key: '4',
          name: '学生层次系数(K4)',
          value: 1.0,
          description: '本科生1.0，硕士生1.2，博士生1.5',
          editable: false,
        },
        {
          key: '5',
          name: '课程类别系数(K5)',
          value: 1.0,
          description: '必修课1.0，选修课0.9，实验课1.1',
          editable: false,
        },
        {
          key: '6',
          name: '环节类别系数(K6)',
          value: 1.0,
          description: '理论教学1.0，实验教学1.2，实习1.3',
          editable: false,
        },
        {
          key: '7',
          name: '重复教学系数(K7)',
          value: 0.9,
          description: '首次授课1.0，重复授课0.9',
          editable: false,
        },
        {
          key: '8',
          name: '教学手段系数(K8)',
          value: 1.0,
          description: '传统教学1.0，混合式1.1，纯线上1.05',
          editable: false,
        },
        {
          key: '9',
          name: '教学质量系数(K9)',
          value: 1.0,
          description: '优秀1.1，良好1.05，合格1.0，不合格0.9',
          editable: false,
        },
      ],
      defaultFormula: '工作量 = H × K1 × K2 × K3 × K4 × K5 × K6 × K7 × K8 × K9',
      cacheData: [],
    }
  },
  methods: {
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          this.$message.success('参数设置保存成功')
        }
      })
    },
    resetForm() {
      this.form.resetFields()
    },
    editCoefficient(key) {
      this.cacheData = this.coefficientData.map((item) => ({ ...item }))
      const target = this.coefficientData.find((item) => item.key === key)
      if (target) {
        target.editable = true
      }
    },
    saveCoefficient(key) {
      const target = this.coefficientData.find((item) => item.key === key)
      if (target) {
        delete target.editable
        this.$message.success('系数修改成功')
      }
    },
    cancelCoefficient(key) {
      const target = this.coefficientData.find((item) => item.key === key)
      if (target) {
        Object.assign(
          target,
          this.cacheData.find((item) => item.key === key)
        )
        delete target.editable
      }
    },
  },
}
</script>

<style>
.actions {
  margin-top: 24px;
  text-align: center;
}
.editable-row-operations a {
  margin-right: 8px;
}
</style>